<template>
  <div>
    <p>
      <el-button size="small" type="text" icon="el-icon-refresh" @click="loaderTreeFiles"/>
      当前类加载器: {{classloaderName}}
    </p>

    <el-row>
      <el-col :span="13">
        <el-table
          :data="treeFiles"
          border
          stripe
          size="mini"
          height="600"
          default-expand-all
          row-key="treeFile.relativePath"
          ref="fileTree"
        >
          <el-table-column label="路径" prop="treeFile.relativePath" >
            <template slot="header">
              <div>
                <span class="margin-right">路径</span>

                <el-button size="small" type="text" icon="el-icon-plus" @click="expandTreeAll"  />
                <el-button size="small" type="text" icon="el-icon-minus" @click="collapseTreeAll" />
              </div>

            </template>
            <template slot-scope="{row}">
              <span v-if="row.treeFile.file">{{row.treeFile.filename}}</span>
              <span v-else>{{row.treeFile.relativePath}}</span>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" prop="treeFile.lastModified" width="150" />
          <el-table-column label="loaded" prop="loaded" width="80">
            <template slot-scope="{row}">
              <div style="font-size: 72px;" class="loaded-show" v-if="row.treeFile.file">
                <b v-if="row.loaded"  style="color: forestgreen;background-color: forestgreen" class=""></b>
                <b v-else style="color: #616060;background-color:#908f8f " ></b>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="mc" prop="methods" width="60" />
          <el-table-column label="fc" prop="fields" width="60" />

          <el-table-column
            label="操作"
            width="200"
            fixed="right"
          >
            <template slot-scope="{row}">
              <template v-if="row.treeFile.file && row.treeFile.filename.endsWith('class')" >
                <el-button size="small" type="text" @click="deCompile(row)">反编译</el-button>
                <el-button size="small" type="text" :disabled="row.loaded" @click="loadClass(row)">加载类</el-button>
              </template>
              <span v-else>占位</span>

            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="11">
        <template v-if="choseClassName">
          <de-compile :classloader-name="classloaderName" :class-name="choseClassName" />
        </template>
        <template v-else>
          选择一个类进行反编译
        </template>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import core from '@/api/core'

import DeCompile from '@/views/core/classloader/DeCompile'

export default {
  name: 'loaderTreeFiles',
  components: { DeCompile },
  props: {
    classloaderName: String
  },
  data(){
    return {
      treeFiles: [],
      loading: false,
      choseClassName: null
    }
  },
  mounted() {
    if (this.classloaderName){
      this.loaderTreeFiles()
    }
  },
  methods: {
    deCompile(row){
      let className = row.treeFile.relativePath.replace(/\//g,'.')
      className = className.replace('classes.','').replace('.class','')
      this.choseClassName = className
    },
    loadClass(row){
      let className = row.treeFile.relativePath.replace(/\//g,'.')
      className = className.replace('classes.','').replace('.class','')
      this.choseClassName = className
      core.loadClass(this.classloaderName,this.choseClassName).then(res => {
        this.loaderTreeFiles()
      })
    },
    loaderTreeFiles(){
      if (this.classloaderName){
        core.loaderTreeFiles(this.classloaderName).then(res => {
          this.treeFiles = [res.data]
        })
      }
    },
    expandTreeAll(){
      if (this.treeFiles && this.treeFiles.length > 0){
        this.toggleExpandRow(this.treeFiles[0],true)
      }
    },
    collapseTreeAll(){
      if (this.treeFiles && this.treeFiles.length > 0){
        this.toggleExpandRow(this.treeFiles[0],false)
      }
    },
    toggleExpandRow(row,expanded){
      if (row === null){
        return
      }
      this.$refs.fileTree.toggleRowExpansion(row,expanded)
      let children = row.children
      if (children){
        for (let i = 0; i < children.length; i++) {
          let item = children[i]
          this.toggleExpandRow(item,expanded)
        }
      }
    }
  },
  watch: {
    classloaderName: {
      handler(){
        this.loaderTreeFiles()
      }
    }
  }
}
</script>

<style scoped>
.loaded-show{
  display: flex;
  vertical-align: center;
  justify-content: center;
}
.loaded-show b {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: inline-block;
}
</style>
